<template>
	<div class="custom-card" flex>
		<div class="cover"><img :src="cardData.url" alt="" /></div>
		<div class="flex-com" flex flexSB>
			<div>

				<div class="title">{{ cardData.title }}</div>
				<div class="text-two-line">{{ cardData.intro }}</div>
			</div>

			<div flex flexSB class="foot">
				<div class="tag">{{ cardData.tag }}</div>
				<div>{{ cardData.date }}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
const props = defineProps(['cardData'])
const cardData = computed(() => props.cardData)

</script>

<style lang="scss" scoped>
.custom-card {
	width: 594px;
	height: 152px;
	background: #FAFAFA;
	border-radius: 8px;
	border: 1px solid #EEEEEE;
	padding: 16px;

	.title {
		font-size: 14px;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 600;
		color: #222222;
	}

	.tag {
		width: 72px;
		height: 22px;
		background: #F0F8FF;
		border-radius: 4px 4px 4px 4px;
		font-size: 13px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #1A97DE;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.foot {
		font-size: 12px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #9E9E9E;
	}
}

[flex=''] {
	display: flex;
}

[flexSB=''] {
	justify-content: space-between;
}

.flex-com {
	flex-direction: column;
}

.cover {
	width: 213px;
	height: 120px;
	border-radius: 4px;
	margin-right: 16px;

	img {
		width: 213px;
		height: 120px;
	}
}

.text-two-line {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	font-size: 12px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #9E9E9E;
}
</style>
